<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		<video :src="video_list[currentIndex].url" controls style="width: 100%;" v-if="video_list.length!==0" />
		<image :src="video.cover" mode="aspectFill" style="width: 750rpx;height: 450rpx;" v-else />
		<!-- #endif -->
		<view class="tab_box">
			<view class="" @click="handletab(0)"><text :style="tabIndex===0?tabStyle:''">简介</text></view>
			<view class="" @click="handletab(1)"><text :style="tabIndex===1?tabStyle:''">评论</text></view>
		</view>
		<view class="introduce_box" v-if="tabIndex===0">
			<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'">
				<view class="info_box">
					<view class="user_info">
						<view class="left_box">
							<image :src="user.avatar?user.avatar:'../../static/avatar.webp'" mode=""
								@click="handleToSpace(user.id)" />
							<view class="text">
								<view class="name one-text-ellipsis" @click="handleToSpace(user.id)">
									{{user.nickname?user.nickname:user.username}}
								</view>
								<view class="fens" @click="handleToSpace(user.id)">{{user.fensCount}}&nbsp;粉丝</view>
							</view>
						</view>
						<view class="follow" v-if="isShowFolloButton!==-1" @click="handleFollow">关注</view>
					</view>
					<view class="title"></view>
					<view class="video_info">
						<view class="desc">
							<text class="iconfont iconbofangshu"></text>
							<text>{{video.danmu_count}}</text>
							<text class="iconfont icondanmushu"></text>
							<text style="margin-right: 20rpx;">{{video.play_count}}</text>
							<text>{{video.createTime | formatTime}}</text>
						</view>
						<view class="fava" @click="handleFava" :style="isFava?widthStyle:''">{{isFava?'已收藏':'收藏'}}
						</view>
					</view>
				</view>
				<view class="choose_episode">
					<view class="head_box">
						<view class="right">选集</view>
						<view class="left">
							<text style="margin-right: 6rpx;">共{{video_list.lenth}}集</text>
							<text class="iconfont iconjinru"></text>
						</view>
					</view>
					<view class="main_box">
						<scroll-view scroll-x="true">
							<view class="item_box">
								<view v-for="(item,index) in video_list" class="item"
									:style="currentIndex===index?borderStyle:''" @click="handleSwitch(index)">
									<view class="">第{{index+1}}集</view>
									<view class="one-text-ellipsis">{{item.title}}</view>
								</view>
							</view>

						</scroll-view>
					</view>
				</view>
				<view class="">
					<VideoList :item="item" v-for="item in recommend_list" />
				</view>
			</scroll-view>

		</view>
		<view class="comment_box" v-else>
			<view class="addComment" @click="handleChooseObj(null,null,'请输入评论')">+</view>
			<scroll-view scroll-y="true" style="height: calc(100vh - 530rpx);" :scroll-top="scrollTop" @scroll="scroll">
				<view class="item_box" v-for="(item,index) in commentList">
					<view class="info_box">
						<image :src="item.send_user.avatar?item.send_user.avatar:'../../static/avatar.webp'" mode=""
							@click="handleToSpace(item.send_user.id)" />
						<view class="">
							<view class="name" @click="handleToSpace(item.send_user.id)">
								{{item.send_user.nickname?item.send_user.nickname:item.send_user.username}}
							</view>
							<view class="time">{{item.created_time | formatTime}}</view>
						</view>
					</view>
					<view class="content"
						@click="handleChooseObj(item.id,item.user_id,item.send_user.nickname?item.send_user.nickname:item.send_user.username)">
						{{item.content}}
					</view>
					<view class="children_box" v-if="item.comments.length!==0">
						<view v-for="(i,n) in item.comments" v-if="item.user_id===i.reply_user_id">
							<text class="blue"
								@click="handleToSpace(i.send_user.id)">{{i.send_user.nickname?i.send_user.nickname:i.send_user.username}}</text>
							<text
								@click="handleChooseObj(item.id,i.send_user.id,i.send_user.nickname?i.send_user.nickname:i.send_user.username)">
								：{{i.content}}
							</text>
						</view>
						<view v-for="(i,n) in item.comments" v-if="item.user_id!==i.reply_user_id">
							<text class="blue" style="margin-right: 14rpx;" @click="handleToSpace(i.send_user.id)">
								{{i.send_user.nickname?i.send_user.nickname:i.send_user.username}}
							</text>
							<text style="margin-right: 14rpx;">回复</text>
							<text class="blue" @click="handleToSpace(i.reply_user.id)">{{i.reply_user.nickname?i.reply_user.nickname:i.reply_user.username}}
							</text>
							<text
								@click="handleChooseObj(item.id,i.send_user.id,i.send_user.nickname?i.send_user.nickname:i.send_user.username)">
								：{{i.content}}
							</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="input_box">
				<input type="text" value="" :placeholder="placeholder" v-model="content" />
				<view class="" @click="handleComment">发送</view>
			</view>
		</view>

	</view>
</template>

<script>
	import VideoList from '@/components/common/video-list.vue'
	import $T from '@/common/time.js';
	export default {
		components: {
			VideoList,
		},
		data() {
			return {
				id: '',
				tabStyle: {
					color: '#FB7299',
					borderBottom: '2rpx solid #FB7299'
				},
				user: {
					id: '',
					username: '',
					nickname: '',
					fensCount: '',
					avatar: ''
				},
				video_list: [],
				recommend_list: [],
				video: {
					user_id: '',
					cover: '',
					title: '',
					createTime: '',
					play_count: '',
					danmu_count: ''
				},
				borderStyle: {
					border: '2rpx solid #FB7299'
				},
				currentIndex: 0,
				// isF
				isShowFolloButton: -1,
				isFollow: false,
				isFava: false,
				widthStyle: {
					width: '110rpx'
				},
				tabIndex: 0,
				content: '',
				reply_id: '',
				commentList: [],
				reply_id: '',
				reply_user_id: '',
				placeholder: '请输入评论',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scrollH:500,


			}
		},
		methods: {
			handleToSpace(id) {
				uni.navigateTo({
					url: `/pages/user-space/user-space?user_id=${id}`
				})
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			handleChooseObj(id, uid, name) {
				this.content = ''
				console.log(id, uid, name)
				this.reply_id = id;
				this.reply_user_id = uid;
				if (name === '请输入评论') {
					this.placeholder = name
				} else {
					this.placeholder = `回复 @${name}`;
				}
			},
			handleComment() {
				console.log(this.top)
				this.$H.post('/comment', {
					video_id: this.id,
					content: this.content,
					reply_id: this.reply_id,
					reply_user_id: this.reply_user_id
				}, this.$params).then(res => {
					console.log(res)
					this.content = '';
					this.getCommentList();
					this.scrollTop = this.old.scrollTop
					this.$nextTick(() => {
						this.scrollTop = 0
					});
					console.log(this.top)
				})

			},
			handletab(value) {
				this.tabIndex = value
			},
			handleFollow() {
				this.$H.post('/user/follow', {
					follow_id: this.video.user_id
				}, this.$params).then(res => {
					this.isFava = res.status
					uni.showToast({
						title: this.isFava ? '关注成功' : '取消关注'
					})
				})
			},
			handleSwitch(index) {
				this.currentIndex = index
			},
			handleFava() {
				this.$H.post('/fava/video', {
					video_id: this.id
				}, this.$params).then(res => {
					this.isFava = res.status
					uni.showToast({
						title: this.isFava ? '收藏成功' : '取消收藏'
					})
				})
			},
			assignData(res) {
				this.user = res.video.user
				this.video_list = res.video.video_details
				this.recommend_list = res.recommendList
				this.video.cover = res.video.cover
				this.video.title = res.video.title
				this.video.createTime = res.video.created_time
				this.video.play_count = res.video.play_count
				this.video.danmu_count = res.video.danmu_count
				this.video.user_id = res.video.user_id
				this.isFava = res.isFava
			},
			getCommentList() {
				this.$H.get(`/video_comment/${this.id}`).then(res => {
					this.commentList = res
				})
			}
		},
		filters: {
			formatTime(value) {
				return $T.gettime(value);
			}
		},
		onLoad(e) {
			let info = uni.getSystemInfoSync()
			this.scrollH = info.windowHeight - 226
			this.id = e.id
			let user = null
			try {
				user = JSON.parse(uni.getStorageSync('user'))
			} catch (e) {
				console.log(e)
			}
			if (user.id) {
				this.$H.get(`/video_read/${this.id}/?user_id=${user.id}`).then(res => {
					console.log(res)
					this.assignData(res)
					if (res.isFollow) {
						this.isFollow = res.isFollow
					}
				})
			} else {
				this.$H.get(`/video_read/${this.id}`).then(res => {
					this.assignData(res)
				})
			}
			this.getCommentList()

		}
	}
</script>

<style lang="scss" scoped>
	.blue {
		color: #0A98D5;
	}

	.tab_box {
		display: flex;
		height: 80rpx;
		border-bottom: 2rpx solid #ecebe9;

		view {
			line-height: 80rpx;
			flex: 1;
			text-align: center;

			text {
				font-size: 32rpx;
				display: inline-block;
			}
		}
	}

	.introduce_box {
		.info_box {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			border-bottom: 2rpx solid #ecebe9;

			.user_info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;

				.left_box {
					display: flex;

					image {
						width: 94rpx;
						height: 94rpx;
						border-radius: 50%;
					}

					.text {
						margin-left: 30rpx;

						.name {
							color: #FB7299;
							font-size: 32rpx;
						}

						.fens {
							font-size: 24rpx;
							color: #6c757d;
						}
					}
				}

				.follow {
					width: 100rpx;
					height: 70rpx;
					background-color: #FB7299;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
					border-radius: 10rpx;
				}


			}

			.title {
				font-size: 32rpx;
				margin: 30rpx 0 10rpx;

			}

			.video_info {
				color: #6c757d;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;

				.desc {
					text {
						margin-right: 8rpx;
					}
				}

				.fava {
					background-color: #FB7299;
					height: 60rpx;
					width: 90rpx;
					text-align: center;
					line-height: 60rpx;
					color: #fff;
					border-radius: 10rpx;
				}
			}

		}

		.choose_episode {
			border-bottom: 2rpx solid #ecebe9;
			padding: 30rpx;

			.head_box {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					font-size: 32rpx;
				}

				.left {
					color: #6c757d;
					font-size: 28rpx;
				}
			}

			.main_box {
				.item_box {
					display: flex;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						margin-right: 20rpx;
						flex-shrink: 0;
						width: 340rpx;
						height: 120rpx;
						padding: 20rpx;
						border: 2rpx solid #ecebe9;

					}
				}

			}
		}

	}

	.comment_box {
		background-color: #fff;
		padding-bottom: 100rpx;

		.addComment {
			position: fixed;
			right: 0rpx;
			// top: 560rpx;
			bottom: 120rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: #FB7299;
			border-radius: 50%;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			font-size: 40rpx;
			z-index: 99999;
		}

		.item_box {
			padding: 30rpx 30rpx;
			border-bottom: 2rpx solid #ecebe9;

			.info_box {
				display: flex;
				align-items: center;

				image {
					margin-right: 20rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.name {
					color: #FB7299;
					font-size: 30rpx;
				}

				.time {
					color: #6c757d;
					font-size: 24rpx;
				}
			}

			.content {
				margin-left: 100rpx;
				width: 590rpx;
				// background-color: #0056B3;

			}

			.children_box {
				margin-top: 14rpx;
				background-color: #f8f9fa;
				margin-left: 100rpx;
				padding: 20rpx;

				view {
					margin-bottom: 12rpx;
				}

				view:nth-last-child(1) {
					margin-bottom: 0;
				}
			}
		}

		.input_box {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 100rpx;
			border-top: 2rpx solid #ecebe9;

			input {
				padding: 0 20rpx;
				margin-right: 20rpx;
				flex: 1;
				height: 60rpx;
				border-radius: 60rpx;
				background-color: #f8f9fa;
			}

			view {
				text-align: center;
				width: 80rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				color: #fff;
				background-color: #FB7299;
			}

		}
	}
</style>
